<div id="Contactos">
    <div id="TituloC">Contactos <img id="cerrar" src="../Imagenes/Cerrar-50.png" alt="" class="BA" onclick="Cambiar(3)"> </div>    
<div id="actions">
   <img src="../Imagenes/Left-40.png" class="prev"/>
   <img src="../Imagenes/Add-32.png" class="BA" id="addC" onclick="$( '#dialog-CrearC').dialog( 'open' );"/>
   <img src="../Imagenes/Right-40.png" class="next"/>
</div>
<div class="scrollable vertical">
    <div class="items">
        <?php 
            include '../Controlador/buscar_todos_contactos.php';
        
        ?>

      </div>   
        
        
</div>
<div id="dialog-CrearC" title="Crear Contacto">
	<p class="validateTips"></p>

	<form>
            <fieldset>
                    <label for="Nombre">Nombre</label>
                    <input type="text" name="Nombre" id="NombreC" class="text ui-widget-content ui-corner-all"/>
                    
                    <label for="Apellido">Apellido</label>
                    <input type="text" name="Apellido" id="ApellidoC" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="Nick">Sobrenombre</label>
                    <input type="text" name="Nick" id="NickC" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="correo">E-mail</label>
                    <input type="text" name="Correo" id="CorreoC" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="Personal">Telefono Personal</label>
                    <input type="text" name="Personal" id="PersonalC" class="text ui-widget-content ui-corner-all" />
                    <label for="Celular">Telefono Celular</label>
                    <input type="text" name="Celular" id="CelularC" value="" class="text ui-widget-content ui-corner-all" />  
                    <label for="Trabajo">Telefono Oficina</label>
                    <input type="text" name="Trabajo" id="TrabajoC" value="" class="text ui-widget-content ui-corner-all" />
                    
            </fieldset>
	</form>
    </div>

<script> 
// execute your scripts when DOM is ready. this is a good habit
$(function() {		
		
	// initialize scrollable with mousewheel support
	$(".scrollable").scrollable({ vertical: true, mousewheel: true });	
	
});

         $(function() {
             var nombre = $( "#NombreC" ),
                apellido = $( "#ApellidoC" ),
                nick = $( "#NickC" ),
                personal = $( "#PersonalC" ),
                trabajo = $( "#TrabajoC" ),
                celular = $( "#CelularC" ),
                correo = $( "#CorreoC" ),
                allFields = $( [] ).add( nombre ).add( apellido ).add( nick ).add( personal ).add( trabajo ).add( celular ).add( correo ),
                tips = $( ".validateTips" ); 
        
    function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
                
    function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "El " + n + " no puede estar vacio" );
				return false;
			} else {
				return true;
			}
		}
     function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
       function checkClaves( a,b ) {
           if ( a.val() != b.val()) {
				a.addClass( "ui-state-error" );
                                b.addClass( "ui-state-error" );
				updateTips( "Las Claves no son iguales" );
				return false;
			} else {
				return true;
			}
		}
         $("#dialog-CrearC").css("visibility","visible");      
    $( "#dialog-CrearC" ).dialog({
			autoOpen: false,
			height: 500,
			width: 300,
			modal: true,
                   	buttons: {
				"Crear": function() {
                                    
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( nombre, "Nombre", 1, 800 );
                                        bValid && checkRegexp( trabajo, /^([0-9])+$/, "Los campos de telefono solo pueden contener numeros." );
					bValid && checkRegexp( celular, /^([0-9])+$/, "Los campos de telefono solo pueden contener numeros." );
                                        bValid && checkRegexp( personal, /^([0-9])+$/, "Los campos de telefono solo pueden contener numeros." );
					if ( bValid ) {

                               
                                                $.post("../Controlador/crea_contacto.php",{nombre:nombre.val(),apellido:apellido.val(),apodo:nick.val(),telefono_trabajo:trabajo.val(),telefono_personal:personal.val(),telefono_movil:celular.val(),correo:correo.val()},function(data){
                                                   
                                                    $( "#mostrar" ).html(data);
                                                    $( "#mostrar" ).dialog( "open" );
                                                   // Cambiar(1);
                                                    
                                                });
                                                
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
                                updateTips( "" );
                                UpdateCal();
			}
		});
                
});
</script> 